<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>

    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">

    // 类组件和函数式组件

    class App extends React.Component {
        // 组件数据
        constructor(){
            super()
            this.state={
                message:"hello world",
                names:["abc","cba","nba"],
                aaa:undefined,
                bbb:null,
                ccc:true,
                friend:{name:"dog"},
                firstName:"in",
                lastName:"zv",
                age: 20,
                movies:["消失的她","八角笼","封神榜"]
            }

            // 对需要绑定的方法，提前绑定好this

        }
        // 组件方法 (实例方法)
       
        // 渲染内容  render方法
        render(){
            const {message, names } = this.state
            const {aaa, bbb, ccc } = this.state
            const { friend } = this.state
            const { firstName, lastName } = this.state
            const { age } = this.state
            const ageText = age >= 18 ? "成年人" : "未成年人"
            const liEls = this.state.movies.map((item,index) => <li key={index}>{item}</li>)
            return (
                <div>
                    {/* 1.number/string/array 直接显示出来 */}
                    <h2>{message}</h2>
                    <h2>{names}</h2>
                    {/* 2.undefined/null/boolean  */}
                    <h2>{String(aaa)}</h2>
                    <h2>{bbb + ""}</h2>
                    <h2>{ccc.toString()}</h2>
                    {/* 3.Object 类型不能作为子元素进行显示 */}
                    <h2>{Object.keys(friend)[0]}</h2>
                    {/* 4.可以插入对应的表达式 */}
                    <h2>{10+20}</h2>
                    <h2>{firstName + lastName}</h2>
                    {/* 5.可以插入三元运算符 */}

                    <h2>{age >= 18 ? "成年人" : "未成年人"}</h2>
                    <h2>{ageText}</h2>
                    {/* 6.调用方法获取结果 */}
                   <ul>{liEls}</ul> 
                   <ul>{this.getMovieEls()}</ul> 
                </div>
            )
        }
        getMovieEls(){
           const liEls =  this.state.movies.map((item,index) => <li key={index}>{item}</li>)
           return liEls
        }
    }

    // 将组件渲染到界面上
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
    </script>
</body>
</html>